import {
  CloseOutlined,
  ForwardOutlined,
  RocketFilled,
} from "@ant-design/icons";
import styles from "./index.module.scss";
import bgImg from "@/assets/images/test.png";
import thailand from "@/assets/images/thailand.jpg";
import myanmar from "@/assets/images/myanmar.webp";
import laos from "@/assets/images/laos.webp";
import vietnam from "@/assets/images/vietnam.jpg";
import cambodia from "@/assets/images/cambodia.webp";
import { useState } from "react";

export default function NodeGuidance() {
  const [activeItem, setActiveItem] = useState(null);
  const navItems = [
    {
      title: "ThaiLand",
      image: thailand,
      description:
        "<div>China, Cambodia, Laos, Myanmar, Thalland andVietnam, linked by mountains and waters, and generationsof traditional friendship, are natural partners and close,friendly neighbors.</div><br/><div>The community of shared future amona Lancang-Mekong countries isthe common choice for the six countries to share the same future and sharethe fruits of development, The six countries are working together to bulild theLMc into a new model of regional cooperation, a new high for developmentand prosperity, and to promote development achievements to benefit all peoplin the sub-region.</div>",
    },
    {
      title: "Myanmar",
      image: myanmar,
      description:
        "<div>China, Cambodia, Laos, Myanmar, Thalland andVietnam, linked by mountains and waters, and generationsof traditional friendship, are natural partners and close,friendly neighbors.</div><br/><div>The community of shared future amona Lancang-Mekong countries isthe common choice for the six countries to share the same future and sharethe fruits of development, The six countries are working together to bulild theLMc into a new model of regional cooperation, a new high for developmentand prosperity, and to promote development achievements to benefit all peoplin the sub-region.</div>",
    },
    {
      title: "Laos",
      image: laos,
      description:
        "<div>China, Cambodia, Laos, Myanmar, Thalland andVietnam, linked by mountains and waters, and generationsof traditional friendship, are natural partners and close,friendly neighbors.</div><br/><div>The community of shared future amona Lancang-Mekong countries isthe common choice for the six countries to share the same future and sharethe fruits of development, The six countries are working together to bulild theLMc into a new model of regional cooperation, a new high for developmentand prosperity, and to promote development achievements to benefit all peoplin the sub-region.</div>",
    },
    {
      title: "Vietnam",
      image: vietnam,
      description:
        "<div>China, Cambodia, Laos, Myanmar, Thalland andVietnam, linked by mountains and waters, and generationsof traditional friendship, are natural partners and close,friendly neighbors.</div><br/><div>The community of shared future amona Lancang-Mekong countries isthe common choice for the six countries to share the same future and sharethe fruits of development, The six countries are working together to bulild theLMc into a new model of regional cooperation, a new high for developmentand prosperity, and to promote development achievements to benefit all peoplin the sub-region.</div>",
    },
    {
      title: "Cambodia",
      image: cambodia,
      description:
        "<div>China, Cambodia, Laos, Myanmar, Thalland andVietnam, linked by mountains and waters, and generationsof traditional friendship, are natural partners and close,friendly neighbors.</div><br/><div>The community of shared future amona Lancang-Mekong countries isthe common choice for the six countries to share the same future and sharethe fruits of development, The six countries are working together to bulild theLMc into a new model of regional cooperation, a new high for developmentand prosperity, and to promote development achievements to benefit all peoplin the sub-region.</div>",
    },
  ];
  const handleNavItemClick = (index: any) => {
    setActiveItem(index);
  };

  return (
    <>
      <div className={styles.homeHeader}>
        <img className={styles.bgImg} src={bgImg} />
        <div className={styles.header_content}>
          <div className={styles.header_content_title}>EXAMPLE TITLE</div>
          <div className={styles.header_content_inner}>
            China, Cambodia, Laos, Myanmar, Thaland andvietnam, inked by
            mountains and waters, and generationsof traditional friendship, are
            nalural partners and close,friendly neighbors.0n 23 March,2016, the
            FirstLancang-Mekong Cooperation (LMc) Leaders' Meetingwas
            successfuly held in Sanya Hainan, during whichchinese Premier Li
            Keciang and leaders of the fivelMekong countries jointly announced
            the launching of the LMC. With the Lan-cang-Mekong river as the
            bond.and the positive responses and acive paricipation of athe
            Lancang-Mekong countries, the LMC has achievedrapid development and
            a series of outcomes. Buldinga community of shared future among
            Lancang-Mekongcountnies is the great goal and beautiful vision
            affirmedby the six countries.
          </div>
        </div>
      </div>
      <div className={styles.nodeNav}>
        <div className={styles.navLeftItem}>
          <div className={styles.leftNavtitle}>
            <RocketFilled
              style={{
                marginRight: "20px",
                color: "#00ff6c",
                transform: "rotate(35deg)",
                fontSize: "30px",
              }}
            />
            NODE NAVIGATION
          </div>
          <div className={styles.leftNavDesc}>
            <div>
              <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
                Node navigation <ForwardOutlined />
              </div>
              <div style={{ lineHeight: "20px" }}>
                China, Cambodia, Laos, Myanmar, Thailand andVietnam, linked by
                mountains and waters, and generationsof traditional friendship,
                are natural partners and close,friendly neighbors.
              </div>
            </div>
          </div>
        </div>

        {navItems.map((item, index) => (
          <div
            key={index}
            className={styles.navItem}
            onClick={() => handleNavItemClick(index)}
            style={{
              height: "820px",
              padding: "0 30px",
              backgroundImage: `url(${item.image})`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              backgroundPosition: "center center",
              display: "flex",
              alignItems: "center",
            }}
          >
            <div className={styles.nationTitle}>{item.title}</div>
          </div>
        ))}
        {activeItem !== null && (
          <div className={styles.detailBox}>
            <CloseOutlined
              className={styles.closeBtn}
              onClick={() => setActiveItem(null)}
            />
            <div className={styles.title}>{navItems[activeItem].title}</div>
            <p
              className={styles.desc}
              dangerouslySetInnerHTML={{
                __html: navItems[activeItem].description,
              }}
            ></p>
            <img src={navItems[activeItem].image} />
            <div className={styles.gotoBtn}>Go to</div>
          </div>
        )}
      </div>
    </>
  );
}
